<%--
  Created by IntelliJ IDEA.
  User: 花生
  Date: 2020/5/14
  Time: 0:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    .td-ad{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        width: 200px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    </style>
</head>
<script>
    // //onload事件不能跳出嵌套
    // window.onload=function(){
    //     companychaxun();
    // }
    //jQuery页面加载时执行
    $(function () {
        companychaxun();
    })

    function companychaxun() {
        // var jsPhone=document.getElementById("phone").value;//JS方法
        // console.log(jsPhone);
        var jqPhone = $("#phone").val();//jquery得到phone的值  val是值没有val就是得到对象
        $.ajax({
            url: '/CompanySelect',//访问后台的地址
            data: {phone: jqPhone},
            type: 'get',//访问后台的类型
            //封装传递给后台的数据
            dataType: 'json',
            success: function (data) {
                setCompanyTableDate(data);
                console.log(data)
            }
        })
//通过页面搜索条件进行查询  模糊查询
    }

    function setCompanyTableDate(data) {
        var html = '';//设定一个html变量赋值为空
        //jQuery的赋值取值赋值直接用$(“id”).html();
        //取值 var value=$("id").html();
        for (var i = 0; i < data.length; i++) {
            //拼接字符串
            html += '<tr>\n' +
                '<td>' + data[i].id + '</td>\n' +
                '<td>' + data[i].logo + '</td>\n' +
                '<td>' + data[i].phone + '</td>\n' +
                '<td class="td-ad">' + data[i].ad + '</td>\n' +
                '<td>' + data[i].html + '</td>\n' +
                '<td>' + data[i].email + '</td>\n' +
                '<td>' + data[i].linePhone + '</td>\n' +
                '<td>' + data[i].address + '</td>\n' +
                '<td>' + data[i].edition + '</td>\n' +
                '<td><input type="button" value="编辑" onclick="update(' + data[i].id + ')"> <input type="button" value="删除" onclick="del(' + data[i].id + ')"> </td>\n' +
                '</tr>';
        }
        $("#companyTbody").html(html);
    }

    function companyChaxunBySome() {
        var data = {
            phone: $.trim($("#phone").val()),
            email: $.trim($("#email").val()),
            html: $.trim($("#html").val()),
            address: $.trim($("#address").val())
        };
        $.ajax({
            url: '/companySelectBySome',
            data: data,
            type: 'get',
            dataType: 'json',
            success: function (data) {
                setCompanyTableDate(data);//将代码提取出来，复用解耦
            }
        })
    }

    function missFocus(e) {
        //trim只能去掉左右两边的空格，要去掉中间的需要用正则表达式
        $(e).val($.trim($(e).val()));
        $("#phone").val($.trim($("#phone").val()));
        $("#email").val($.trim($("#email").val()));
        $("#html").val($.trim($("#html").val()));
        $("#address").val($.trim($("#address").val()));
    }
    function del(id) {
        $.ajax({
            url:'/CompanyDelete',
            type:'post',
            data:{id:id},
            dataType:'json',
            success: function (data) {
                if (data == 1 ){
                    companychaxun();
                } else {
                    alert("操作失败");
                }

            }
        })
    }

    function update() {
        // localStorage.setItem("companyId",id);
        $('#homeRight').load('/back/CompanyUpdate.jsp');
    }

</script>
<body>
手机<input type="text" id="phone" value="" onblur="missFocus(this)">
邮箱<input type="text" id="email" value="" onblur="missFocus(this)">
网址<input type="text" id="html" value="" onblur="missFocus(this)">
地址<input type="text" id="address" value="" onblur="missFocus(this)">
<input type="button" value="查询" onclick="companyChaxunBySome()">

<a href="javaScript:$('#homeRight').load('/back/CompanyAdd.jsp')">新增</a>
<table class="table table-hover">
    <thead>
    <tr>
        <td>id</td>
        <td>logo</td>
        <td>电话</td>
        <td>广告</td>
        <td>网址</td>
        <td>邮箱</td>
        <td>座机</td>
        <td>地址</td>
        <td>版本</td>
        <td>操作</td>

    </tr>
    </thead>
    <tbody id="companyTbody">

    </tbody>
</table>
</body>
</html>
